import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {
    Flex,
    Button
} from 'antd-mobile';

import PlateKeyboard from './PlateKeyboard.jsx'

/**
 * 车辆操作页面
 * */
@inject('inputCarStore', 'carOrderStore')
@observer
class CarList extends Component {

    componentDidMount() {
        this.props.inputCarStore.loadData();
        this.topHeight = this.refs.divTitle.offsetHeight;
        console.log("height: ", this.refs.divTitle.offsetHeight)
    }

    render() {
        const {
            parkInfo,
            carPay,
            visible,
            index,
            selectInput,
            value,
            selectCallback,
            closeSelect,
            fallback,
            disabled
        } = this.props.inputCarStore;
        const values = value.slice();
        return (<div style={{
                MozUserSelect: 'none',
                OUserSelect: 'none',
                KhtmlUserSelect: 'none',
                WebkitUserSelect: 'none',
                msUserSelect: 'none',
                userSelect: 'none'
            }}>
                <div className="title-tips">{parkInfo ? parkInfo.parkName : '该小区无停车场'}</div>
                <div style={{backgroundColor: '#fff', paddingBottom: '10px'}} ref="divTitle">
                    <div style={{fontSize: '18px', color: '#848484', padding: '10px 15px 0 15px'}}>
                        请输入车牌号
                    </div>
                    <Flex style={{padding: '10px 15px'}}>
                        <Flex.Item style={{flex: '2'}}>
                            <div className={index === 0 || index === 1 ? "input-lattice select" : "input-lattice"}>
                                <div style={{
                                    width: '100%',
                                    height: '100%',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }} onClick={() => selectInput(0)}>{values[0]}
                                </div>
                                <hr className="hr-vertical"/>
                                <div style={{
                                    width: '100%',
                                    height: '100%',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }} onClick={() => selectInput(1)}>{values[1]}
                                </div>
                            </div>
                        </Flex.Item>
                        <Flex.Item style={{flex: '0.1'}}>
                            <div style={{
                                width: '100%',
                                height: '10vw',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                fontSize: '8px',
                                marginLeft: '1.5px',
                                color: '#D4D3D8'
                            }}>●
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={() => selectInput(2)}
                                 className={index === 2 ? "input-lattice select" : "input-lattice"}>{values[2]}</div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={() => selectInput(3)}
                                 className={index === 3 ? "input-lattice select" : "input-lattice"}>{values[3]}</div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={() => selectInput(4)}
                                 className={index === 4 ? "input-lattice select" : "input-lattice"}>{values[4]}</div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={() => selectInput(5)}
                                 className={index === 5 ? "input-lattice select" : "input-lattice"}>{values[5]}</div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={() => selectInput(6)}
                                 className={index === 6 ? "input-lattice select" : "input-lattice"}>{values[6]}</div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={() => selectInput(7)}
                                 className={index === 7 ? "input-lattice select new-border" : "input-lattice new-border"}>
                                {values[7] ? values[7] :
                                    <img src="/pages/mobile/car/scan/pre/ioc_new_energy.png" style={{width: '100%'}}/>}
                            </div>
                        </Flex.Item>
                    </Flex>

                    <Button className="am-button-submit" disabled={disabled}
                            onClick={() => carPay(this.props)}>去交费</Button>
                </div>
                <div style={{backgroundColor: '#fff', marginTop: '15px', padding: '15px'}}>
                    <div style={{fontSize: '18px', color: '#2B2B2B', marginBottom: '10px'}}>注意事项：</div>
                    <hr style={{borderWidth: '0 0 1px 0'}}/>
                    <div className="tips-items" style={{marginTop: '15px'}}>
                        ◆临牌、特殊车牌及车牌识别有误的车辆,请到中央收费处缴费
                    </div>
                    <div className="tips-items">
                        ◆15分钟内免费
                    </div>
                    <div className="tips-items">
                        ◆缴费后需30分钟内离场，超时需重新计费
                    </div>
                </div>

                <PlateKeyboard
                    visible={visible}
                    inputType={index}
                    selectCallback={selectCallback}
                    closeSelect={closeSelect}
                    fallback={fallback}/>
                <style>
                    {
                        `
                        .input-lattice {
                            width: 100%;
                            height: 10vw;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border: 1.5px solid #EBEBED;
                        }

                        .new-border {
                            border-style: dashed;
                        }

                        .select{
                            border: 1.5px solid #D2AE5E;
                        }

                        .hr-vertical{
                           height: 80%;
                           border: none;
                           border-left: 1.5px solid #EBEBED;
                            -webkit-margin-start: 0em;
                            -webkit-margin-end: 0em;
                        }

                        .tips-items{
                           font-size: 16px;
                           color: #808080;
                           margin-top: 15px;
                        }

                        .am-flexbox .am-flexbox-item {
                            margin-left: 5px;
                        }

                        .title-tips {
                          font-size: 18px;
                          text-align: center;
                          height: 50px;
                          line-height: 50px;
                          font-weight: bold;
                          width: 100%;
                          color: #fff;
                          background-image: url("/pages/mobile/car/scan/pre/title_bg.png");
                        }
                        .am-button-submit {
                            color: #5E93D9;
                            background-color: #D7E9FF;
                            margin: 0 15px;
                        }
                        `
                    }
                </style>
            </div>
        );
    }
}

export default CarList;